<template>
  <MkQueryContainer>
    <template #header>
      <MkForm ref="queryForm" :inline="true">
        <el-form-item label="关键字">
          <el-input @keyup.enter.native="search" v-model="searchParam.keyword" clearable />
        </el-form-item>
        <el-form-item>
          <MkButtonQuery @click="search"> </MkButtonQuery>
          <MkButtonAdd @click="add"></MkButtonAdd>
        </el-form-item>
      </MkForm>
    </template>
    <MkTable :data="tableData" v-loading="loading" @row-dblclick="edit">
      <MkColumnIndex />
      <MkColumn prop="daLei" label="血液大类" autoWidth />
      <MkColumn prop="mingCheng" label="名称" autoWidth />
      <MkColumn prop="danWei" label="单位" />
      <MkColumn prop="zhuanHuanLv" label="转换率" />
      <MkColumnBoolean prop="shiFouPeiXue" label="是否配血" />
      <MkColumnBoolean prop="shiFouDaLiangYongXue" label="是否大量用血" />
      <MkColumn prop="youXiaoQiXiaoShiShu" label="有效期小时数" />
      <MkColumn prop='orderNo' label='排序' />
      <MkColumn prop='remark' label='备注' />
      <MkColumnIsEnabled />
      <MkColumnOption @show="edit" :isMore="false" />
    </MkTable>
    <MkPagination v-model:page="searchParam.page" v-model:pageSize="searchParam.pageSize" :total="total"
      @query="search" />
    <EditPage ref="editPageRef" @query="search" />
  </MkQueryContainer>
</template>

<script lang='ts' setup name="basXueYePinZhong">
// 血液品种资料
import { BasXueYePinZhongApi, BasXueYePinZhongOutput } from '/@/api/bas/BasXueYePinZhong';
import { usePageQuery } from '/@/hooks/usePageQuery'
import { clog, showSuccess } from '/@/utils'

import EditPage from './edit.vue'

const { searchParam, total, tableData, loading, search } = usePageQuery<BasXueYePinZhongOutput>(BasXueYePinZhongApi.page)

const editPageRef = ref();

onMounted(() => {
  search();
})

const add = () => {
  editPageRef.value.open();
}

const edit = (row: any) => {
  editPageRef.value.open(row);
}
</script>

<style lang='scss' scoped></style>